<!-- 攻略排行榜 -->
<template>
    <div class="box">
        <span class="ranking-title">旅游攻略导航</span>
        <ranking-nav></ranking-nav>
        <ul class="ranking-list" >
            <li v-for="(item,index) in ranking" :key="index">
               <div class="ranking-item" v-if="index==0">
                    <a href="#" class="ranking-link">
                        <img :src="item.img" width="130px" height="184px">
                    </a>
                <div class="ranking-inf">
                    <span class="ranking-upDate">更新日期:{{item.upDate}}</span>
                    <span class="ranking-download">
                        <span class="ranking-ico"><i class="fa fa-arrow-down" aria-hidden="true"></i></span>
                        <span class="ranking-download-num">{{item.download}}人下载</span>
                    </span>
                </div>
               </div>

               <div class="ranking-item" v-else>
                   <a href="#" class="ranking-link link-item">
                        <span class="ranking-num">{{index+=1}}</span>
                        <span class="ranking-name">{{item.place}}</span>   
                    </a>
               </div>
            </li>
        </ul>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import rankingNav from './rankingNav'
export default {
    data () {
        return {
          
        };
    },

    components: {
        rankingNav
    },
    computed:{
        ...mapState(['ranking'])
    },
    mounted(){
        this.$store.dispatch('reqRanking')
    },
    methods: {}
}

</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
    .box
        width 160px
        margin-right 50px
        .ranking-title
            color #333
            font-size 16px
            line-height 48px
        .ranking-list
            display flex
            flex-direction column
            margin-top 15px
            .ranking-item
                display flex
                flex-direction column
                .ranking-inf
                    display flex
                    flex-direction column
                    .ranking-upDate
                        font-size 12px
                        color #666666
                        width 130px
                        text-align center
                    .ranking-download
                        background-color #EBEBEB
                        width 130px
                        color #666666
                        display flex
                        align-items center
                        border-radius 20px
                        margin-top 5px
                        margin-bottom 15px
                        .ranking-ico
                            color #9fce4a
                            border 3px solid #9fce4a
                            border-radius 50%
                            width 20px
                            height 20px
                            display block
                            text-align center
                            line-height 20px
                        .ranking-download-num
                            font-size 12px
                            margin-left 6px
                .link-item
                    padding 15px 0px 15px 0
                    border-top 1px solid #e3e3e3
                    .ranking-num
                        color #ff9d00
                        font-size 18px
                    .ranking-name
                        font-size 14px
                        color #666666
                        margin-left 10px
                        &:hover
                            color #ff9d00
                            text-decoration underline
                            


                
</style>